<template>
  <div>
     <div class="title">
       <p>学员列表</p>
       <el-button  class="dele" type="" size="mini" @click="delfun"> 批量删除 </el-button>
       </div>
     <el-table
        ref="multipleTable"
        :data="arr"
        style="width: 100%"
        @selection-change="handleSelectionChange" >
        <el-table-column
          type="selection"
          width="55" >
        </el-table-column>
        <el-table-column
          prop="id"
          label="用户ID"
          width="120"
          show-overflow-tooltip
          align="center" >
        </el-table-column>
        <el-table-column
          prop="name"
          label="微信昵称"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="会员手机"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          label="消费金额"
          width="120"
          align="center">
          <!-- template空标签 slot-scope等同于v-slot插槽 -->
          <template slot-scope="scope">
            <i></i>
            <span style="margin-left:10px"> ${{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="订单数量"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          label="会员等级"
          width="120"
          align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paytime"
          label="上次消费时间"
          width="140"
          align="center">
        </el-table-column>
        
        <el-table-column label="禁用账户"  width="120"  align="center">
          <el-switch
            v-model="value"
            active-color="#ff4949"
            inactive-color="#C0C0C0">
          </el-switch>
        </el-table-column>
      
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              type="info" plain
              size="mini"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

     </el-table> 
  </div>
   <!-- @selection-change="handleSelectionChange:多选框 -->
  
</template>

<script>

import {deleteStuApi, delHomeApi} from '../../../api/stuApi'
import Bus from '../../../utils/Bus'
export default {
     props:['arr'],
     data() {
      return {
        value: false,
        // tableData: [{
        //   id:'0012639',//用户ID
        //   name:'爱吃阿司匹林的喵',//微信昵称
        //   phone:18854138769,      //会员手机
        //   money:'2366.00',    //消费金额
        //   num:'10',             //订单数量
        //   type:3,//             //会员等级
        //   paytime:'2019-01-25 10:55',//上次消费时间
        // },
        // ],
        multipleSelection: [],
        ids: ''
      }
    },
    
    methods:{
     
      //全选事件
      handleSelectionChange(val) {
        var ids = ''
        val.forEach(item => {
          // console.log(item.id)
          ids += item.id + ','
        });

          this.ids = ids
        console.log(val);
        this.multipleSelection = val;
      },
      //修改
      handleEdit(row) {
        console.log(row);
        this.$emit('parentidshowfun',row)
      },
      //删除
      handleDelete(id) {
        //发送请求 把id传给后端  删除成功 刷新表格
        deleteStuApi({id:id}).then(res=>{
          console.log(res);
          // console.log(res.id)
          if(res.code == 200){
            //刷新表格
            this.$emit('parentResetFun')
          }
        })
      },
      //批量删除
      delfun() {
        // console.log(this.ids)
        var ids = this.ids
        delHomeApi({ids}).then(res => {
          console.log(res)
          if(res.code === 200) {
            this.$emit('delfun')
          }
        })
      }
    }
 

}
</script>

<style scoped>
.title{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: white;
  justify-content: flex-start;
  border-top: 20px solid #d5dff3;
}
.title p{
  margin-left: 30px;
  font-size: 900;
}
.title .dele{
   border:0;
   margin-left: 20px;
   font-size: 15px;
}
</style>



